import React, { Component } from 'react';
import { Card, WhiteSpace, List, Badge, Flex, Button, SegmentedControl, Icon, NavBar, WingBlank } from 'antd-mobile';
import { connect } from 'react-redux';
import { SelectIndexAction } from '../../actions/tab';

import GradeCard from '../../components/gradeCard/index'
import AnchorCard from '../../components/anchorCard/index'
import AppPage from '../../container/AppPage';

import { _getBarList } from '../../utils/apifun'
 class FindPage extends Component {
    constructor(props) {
        super(props)
        this.state = {
            segmentedValue: '学习',
            gradeList: [],
            upList: []
        }
    }
    async getBarList() {
        let gradeList = sessionStorage.getItem('gradeList')
        if (gradeList === null) {
            const res = await _getBarList()
            console.log(res);
            if (res.status === 200) {
                this.setState({
                    gradeList: res.data.data
                })
                sessionStorage.setItem('gradeList', JSON.stringify(res.data.data))
                console.log('请求接口', res.data.data);
            }
        } else {
            // console.log('走缓存',gradeList)
            this.setState({
                gradeList:JSON.parse(gradeList)
            })
        }
    }
    componentDidMount = () => {
        this.getBarList()
        // this.forceUpdate();

    }
    onChange = (e) => {
        console.log(`selectedIndex:${e.nativeEvent.selectedSegmentIndex}`);
        this.props.SelectIndexAction(e.nativeEvent.selectedSegmentIndex)
    }
    onValueChange = (value) => {
        this.setState({
            segmentedValue: value
        })
        if (value === '学习') {
            this.getBarList()
        }
    }

    render() {
        let segmentedValue = this.state.segmentedValue
        console.log(this.state.gradeList);
        return (
            <div>
                <NavBar mode='dark'
                    rightContent={<Icon type='ellipsis'></Icon>}
                > 发现</NavBar>
                <AppPage>
                    <WingBlank size='lg'>
                        <WhiteSpace size="lg"></WhiteSpace>

                        <SegmentedControl
                            values={['学习', '主播']}
                            onChange={this.onChange}
                            onValueChange={this.onValueChange}
                            selectedIndex={this.props.state.selectedIndex}
                        />
                        <WhiteSpace size="lg"></WhiteSpace>
                        {segmentedValue === '学习'?
                            <GradeCard data={this.state.gradeList}/>:<AnchorCard/>
                        }
                    </WingBlank>
                </AppPage>

            </div>
        )
    }
}
const mapStateToProps = (state) => {
    return {
        state: state.tab,
    }
}
const actionCreator = { SelectIndexAction }
export default connect(mapStateToProps, actionCreator)(FindPage);